<template>
	<view class="auditDetails">
		<view class="header">
			<view class="tabs" v-if="checked==false">
				<view class="tab" v-for="(item,index) in tabs.list" :key="index" :class="{active:tabs.index==index}" @click="clickTab(item,index)">
					<view v-if="index==1" class="tabIndex">
						<image class="image" src="@/static/image/index/icon5.png"></image>
						{{item.name}}
						<template v-if="tabs.index==1">
							({{goods.length}})
						</template>
					</view>
					<view v-else>{{item.name}}</view>
				</view>
			</view>
			<view v-else class="richeng">
				<image class="image" src="@/static/image/index/richeng.png"></image>
				{{$t('index.richeng')}}
			</view>
			<view class="right">
				<u-switch v-model="checked" @change="changeFn"></u-switch>
				<u-icon name="calendar" color="#fff" size="28" @click="$refs.calendar.open()"></u-icon>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick" :top="top+45+'px'" bottom="51px">
			<good-list :list="goods" @clickRow="clickRow" class="goodlist"></good-list>
		</mescroll-uni>
		<!-- 日历 -->
		<uni-calendar ref="calendar" :insert="false" :lunar="true"  @confirm="confirmcalendar" :startDate="this.calendar.range.startDate"
		:endDate="this.calendar.range.endDate"/>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import goodList from "./goodList.vue";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		props: {
			top: [Number, String],
		},
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		components: {
			goodList
		},
		data() {
			return {
				checked:false,
				tabs: {
					index: 1,
					list: [{
						name:this.$t('index.quanbu'),
						icon:''
					},
					{
						name:this.$t('index.jinxingzhong'),
						icon:''
					},
					{
						name:this.$t('index.yijieshu'),
						icon:''
					}]
				},
				goods: [] ,//列表数据
				downOption: {
					auto: true ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					textOutOffset:this.$t('mescroll.shifanggenxin'),
					textInOffset:this.$t('mescroll.xialashuaxin'),
					textLoading:this.$t('mescroll.jiazaizhong'),
					textSuccess:this.$t('mescroll.jiazaichenggong'),
					textErr:this.$t('mescroll.jiazaishibai'),
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无记录 ~',
						fixed:true,
						top: "200rpx",
					},
					textNoMore:this.$t('mescroll.chudile')
				},
				calendar:{
					type:'今天',
					date:'',
					range:{//范围
						startDate:'',
						endDate:'',
					},
				}
			}
		},
		mounted(option) {
			that = this
			this.calendar.range =this.getPastAndFutureDates()
		},
		methods: {
			clickRow(){
				this.$emit("clickRow",true)
			},
			// 获取当前日期的前第五天和后第五天日期
			getPastAndFutureDates() {  
				const today = new Date();  
				const fifthDayBefore = new Date(today.getTime() - 5 * 24 * 60 * 60 * 1000);  
				const fifthDayAfter = new Date(today.getTime() + 5 * 24 * 60 * 60 * 1000);
				return {  
					startDate: fifthDayBefore.toISOString().slice(0, 10),  
					endDate: fifthDayAfter.toISOString().slice(0, 10)  
				};  
			},
			//日历选择
			confirmcalendar(date){
				if(date.lunar.isToday==true){
					this.tabs.index=1
					this.calendar.type ='今天' 
				}else{
					let time = new Date().getTime()
					let time2 = new Date(date.fulldate).getTime()
					if(time2<time){//之前的日期，历史
						this.tabs.index=2
						this.calendar.type ='历史' 
					}else{
						this.tabs.index=0
						this.calendar.type ='未来' 
					}
				}
				this.calendar.date = date.fulldate
				this.downCallback()
			},
			//日程切换
			changeFn(value){
				this.downCallback()
			},
			clickTab(item,i){
				this.tabs.index=i
				this.downCallback()
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.goods = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				if(this.checked==true){//日程
					this.getListRC()//赛程
				}else{
					if(this.calendar.type=='今天'){
						this.getList()
					}else if(this.calendar.type=='历史'){
						//赛果
						this.getDateList()
					}else if(this.calendar.type=='未来'){
						//赛程
						this.getListRC()
					}
				}
			},
			getListRC() {
				let req={
					params:{
						date:this.calendar.date
					}
				}
				uni.$u.http.get(this.api.api_v1_bkScore_matchSchedule, req).then(res => {
					if(res.code==200&&res.data){
						this.goods=res.data.map(item=>{
							item[23] = uni.$u.timeFormat(item[6], 'yyyy-mm-dd')
							return item
						})
					}else{
						this.goods=[]
					}
					this.mescroll.endSuccess(res.data.length,false);
					this.mescroll.lockUpScroll(true)
				}).catch(err => {
					this.goods=[]
					this.mescroll.endErr();
				})
			},
			getList() {
				uni.$u.http.get(this.api.api_v1_bkScore_matchImmediate, {}).then(res => {
					if(res.code==200&&res.data){
						this.goods=res.data.map(item=>{
							item[23] = uni.$u.timeFormat(item[6], 'yyyy-mm-dd')
							return item
						})
						this.copyGoods = JSON.parse(JSON.stringify(this.goods))
						//根据类型
						this.filterFn()
					}else{
						this.goods=[]
					}
					this.mescroll.endSuccess(res.data.length,false);
					this.mescroll.lockUpScroll(true)
				}).catch(err => {
					this.goods=[]
					this.mescroll.endErr();
				})
			},
			//日期选择时赛果
			getDateList(){
				let req={
					params:{
						date:this.calendar.date
					}
				}
				uni.$u.http.get(this.api.api_v1_bkScore_matchFruit, req).then(res => {
					if(res.code==200&&res.data){
						this.goods=res.data.map(item=>{
							item[23] = uni.$u.timeFormat(item[6], 'yyyy-mm-dd')
							return item
						})
						this.copyGoods = JSON.parse(JSON.stringify(this.goods))
						//根据类型
						this.filterFn()
					}else{
						this.goods=[]
					}
					this.mescroll.endSuccess(res.data.length,false);
					this.mescroll.lockUpScroll(true)
				}).catch(err => {
					this.goods=[]
					this.mescroll.endErr();
				})
			},
			//根据类型过滤
			filterFn(){
				let arr1=[1,2,3,4,5,6,7,50]//进行
				let arr2=[-1]//结束
				if(this.tabs.index==0){//全部
					this.goods = this.copyGoods
				}else if(this.tabs.index==1){//进行
					this.goods = this.copyGoods.filter(item=>{
						if(arr1.includes(item[4])){
							return item
						}
					})
				}else if(this.tabs.index==2){//结束
					this.goods = this.copyGoods.filter(item=>{
						if(arr2.includes(item[4])){
							return item
						}
					})
					this.goods=this.goods.reverse()
				}
				//根据时间过滤
				this.filterTimeFn(this.goods)
			},
			//根据时间过滤
			filterTimeFn(list){
				if(this.calendar.date){
					this.goods =list.filter(item=>item[23] == this.calendar.date)
				}
			},
			//点击空布局按钮的回调
			emptyClick() {
				
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-switch__bg{
		background: #3c3c3c!important;
	}
	/deep/ .u-switch{
		border-color:#3c3c3c!important;height: 20px!important;background: transparent!important;
	}
	/deep/.u-switch__node{
		position: fixed!important;background-color: #26b85d!important;background: url('../../../../static/image/index/icon2.png') no-repeat center;background-size: 20px 20px;
	}
	/deep/ .u-switch__node--on{
		background: url('../../../../static/image/index/icon3.png') no-repeat center;background-color: #ffae01!important;background-size: 20px 20px;
	}
	.auditDetails {
		max-width: 790px;margin: auto;
		.goodlist{
			max-width: 790px;margin: auto;
		}
		.header{
			display: flex;justify-content: space-between;width: 100%;align-items: center;
			.tabs{
				display: flex;padding: 10px;justify-content: space-around;flex: 1;
				.tab{
					padding: 5px 10px;border-radius: 5px;background-color: #3c3c3c;color: #9ea7b9;font-size: 12px;
					.tabIndex{
						display: flex;align-items: center;
						.image{
							width: 16px;height: 16px;
						}
					}
				}
				.active{
					background-color: #ffaf01;color: #fff;
				}
			}
			.richeng{
				display: flex;align-items: center;padding:12px;color: #fff;
				.image{
					width: 20px;height: 20px;margin-right: 5px;
				}
			}
			.right{
				width: 200rpx;display: flex;justify-content: space-around;align-items: center;
			}
		}
		
	}
</style>